<template>
  <div>
    <div v-for="(item, index) in lines" :key="'line' + index" class="line" :style="getLineStyle(item)"></div>
  </div>
</template>

<script>
import opentype from 'opentype.js'
import Adsorb from './adsorb'
export default {
  name: 'Adsorb',
  props: {
    lines: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      adsorb: {}
    }
  },
  mounted() {
    this.adsorb = new Adsorb({ positionId: 'adsorb', adsorbPadding: 10 })
    this.$emit('init', this.adsorb)
    opentype.load('https://shejimao-test.oss-cn-huhehaote.aliyuncs.com/common/typeface/587d0395e1dd4c12869240f8c09e2473.woff', function(err, font) {
      if (err) {
        alert('Font could not be loaded: ' + err)
      } else {
        console.log(font, 'font')
        const glyph = font.charToGlyph('元')
        console.log(glyph.getBoundingBox(), glyph)
        /* // Now let's display it on a canvas with id "canvas"
        const ctx = document.getElementById('canvas').getContext('2d');

        // Construct a Path object containing the letter shapes of the given text.
        // The other parameters are x, y and fontSize.
        // Note that y is the position of the baseline.
        const path = font.getPath('Hello, World!', 0, 150, 72);

        // If you just want to draw the text you can also use font.draw(ctx, text, x, y, fontSize).
        path.draw(ctx);*/
      }
    })
  },
  methods: {
    getLineStyle(data) {
      const style = {
        borderWidth: 0,
        borderStyle: 'solid',
        borderColor: 'red',
        width: data.width + 'px',
        height: data.height + 'px',
        top: data.top + 'px',
        left: data.left + 'px'
      }
      if (/v/.test(data.type)) {
        style.borderLeftWidth = '1px'
      }
      if (/h/.test(data.type)) {
        style.borderTopWidth = '1px'
      }
      return style
    }
  }
}
</script>

<style lang="scss" scoped>
.line {
  position: absolute;
}
</style>
